<template>
  <div class="customer" v-show="isEnd">
    <div class="email-customer">
        <div style="display: flex;justify-content: space-between;padding: 13px 0">
          <!--顶部切换类型-->
          <ul class="top-menu">
            <li :class="{active:currentFrag==-1}" @click="toggle(-1)">全部邮件</li>
            <li :class="{active:currentFrag==0}" @click="toggle(0)">发送的</li>
            <li :class="{active:currentFrag==1}" @click="toggle(1)">接收的</li>
            <div class="line" :style="{left:Left}"></div>
          </ul>
          <el-input placeholder="输入邮件信息搜索" v-model="searchContent" class="input-with-select" style="width: 230px"
                    size="mini" @keyup.enter.native="handleCurrent(1)">
            <el-button slot="append" icon="el-icon-search" @click="handleCurrent(1)"></el-button>
          </el-input>
        </div>
      <!-- 列表数据展示-->
      <div class="detail list-table" :style="{maxHeight:$height-385+'px',overflowY:'auto'}" v-loading="loading">
        <div v-for="item,i in data" :key="i">
          <h1 class="title-table" v-show="item.total>0">
            {{item.title}}({{item.total}})
          </h1>
          <table class="table-detail">
            <tbody>
            <tr v-for="itemSon,i in item.list" :key="i" :class="{'active':itemSon.readStatus==1}">
              <td style="width: 30px;text-align: center">
                <!--是否建档-->
                <img v-if="itemSon.emailCustomerVO.type ==0" title="陌生人"
                     src="../../../../public/img/email/icon/icon-people.png" class="delivery-img"
                     alt="陌生人">
                <img v-else-if="itemSon.emailCustomerVO.type ==4" title="公海客户"
                     src="../../../../public/img/email/icon/icon-common.png" class="delivery-img"
                     alt="公海客户">
                <img v-else-if="itemSon.emailCustomerVO.type ==2"  title="同事建档客户"
                     src="../../../../public/img/email/icon/icon-worker.png" class="delivery-img"
                     alt="同事建档客户">
                <img v-else-if="itemSon.emailCustomerVO.type ==3"  title="共享客户"
                     src="../../../../public/img/email/icon/icon-share.png" class="delivery-img"
                     alt="共享客户">
                <img v-else title="建档客户" src="../../../../public/img/email/icon/icon-customer.png"
                     class="delivery-img" alt="建档客户">
              </td>
              <td width="330px" @click="toDetail(itemSon)">
                <span class="more" style="width: 320px;padding-right:10px;" v-html="filterEmail(itemSon)"></span>
              </td>
              <td :title="itemSon.emailSubject" @click="toDetail(itemSon)">
                  <span class="more" style="max-width: 350px">
                    <!--1.紧急图标 -->
                     <img v-if="parseInt(itemSon.emaileDelivery)==2" title="紧急邮件"
                          src="../../../../public/img/email/icon/icon-emps.png" class="delivery-img" alt="紧急邮件">
                    <!--2.是否回复-->
                      <img v-if="parseInt(itemSon.emailReply)==1" title="已回复"
                           src="../../../../public/img/email/icon/icon-replay.png" alt="" class="delivery-img">
                    {{itemSon.emailSubject}}
                  </span>
              </td>
              <td style="width: 200px">
                <el-tag :closable="false"
                        v-for="itemElse in itemSon.emailLabelList"
                        :key="itemElse.labelName" :color="itemElse.labelColor"
                        @close="handleClose(itemElse.temailLabelId)">
                  {{itemElse.labelName}}
                </el-tag>
              </td>
              <td width="150px" :title="itemSon.sendTime" @click="toDetail(itemSon)">
                <span class="time">{{itemSon.sendTime}}</span>
              </td>
              <td width="30px" class="make-td">
                <!-- 附件-->
                <img v-show="itemSon.attachmentNumber>0" src="../../../../public/img/email/icon/icon-file.png"
                     title="邮件附件" class="delivery-img" alt="邮件附件">
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="empty" v-show="total==0">
        <img src="../../../../public/img/empty.png" alt="">
      </div>
      <el-pagination class="fixed"
                     background align="right"
                     @current-change="handleCurrent"
                     @size-change="handleSizeChange"
                     :current-page="currentPage"
                     :page-size="size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
    import {getTimeEmailList,getDiffList} from "@/util/util"
    import {queryEmailTypeList} from "@/api/mail/customer/slider"
    import {mapState} from 'vuex'

    export default {
        name: "EmailList",
        data() {
            return {
                loading:false,
                theEmail: '',
                total: 0,
                currentPage: 1,
                searchContent: '',
                data: [],
                list: [],
                size: 20,
                dialogTime: false,
                emailList: [],
                userId: '',
                nextEmail: '',
                listAll: [],
                archiveFolderId: '',
                currentFrag: -1,
                Left: '25px',
                isEnd:false
            }
        },
        computed: {
            ...mapState(['common']),
        },
        watch:{
            '$route'(to) {
                this.init(to.params.id,to.params.email)
            }
        },
        created(){
            this.currentPage = this.common.emailPage;
            this.size = this.common.emailPageSize;
            const result = this.$route.params;
            this.init(result.id,result.email)
        },
        methods: {
            toggle(type) {
                this.currentFrag = type;
                this.handleCurrent(1);
                this.filterPosition()
            },
            filterPosition() {
                let left = 0;
                switch (this.currentFrag) {
                    case -1:
                        left = 25;
                        break;
                    case 0:
                        left = 187;
                        break;
                    case 1:
                        left = 342;
                        break;
                    default:
                        break;
                }
                this.Left = left + 'px'
            },
            init(userId, email) {
                this.userId = userId;
                this.nextEmail = email;
                this.getData();
            },
            //查看下属详情页面
            toDetail(row) {
                const ID = row.temailInfoId.toString();//row.id - 临时
                if (getDiffList(ID,'emailListNextTab') == -1) {
                    this.$store.commit('SET_EMAILLISTNEXTTAB', {
                        type: 1, row: {
                            id: ID,
                            title: row.emailSubject,
                            state:1,
                            close: true
                        }
                    })
                }else{
                    this.$store.commit('SET_EMAILLISTNEXTTAB', {type:0,current:ID})
                }
            },
            handleSizeChange(val) {
                this.size = val;
                this.$store.commit('SET_EMAILPAGESIZE', this.size)
                this.handleCurrent(1)
            },
            handleCurrent(val) {
                this.currentPage = val;
                this.$store.commit('SET_EMAILPAGE', this.currentPage)
                this.getData();
            },
            //根据邮箱+类型获取对应的邮件列表数据
            getData() {
                let params = {
                    userId: this.userId,//下属客户查询邮件时候需要
                    query: this.searchContent,
                    emailAddress: this.nextEmail,
                    current: this.currentPage,
                    size: this.size,
                    type:1,
                    emailType: this.currentFrag == -1 ? '' : this.currentFrag,//0已发送 1 收件 ‘’ 全部
                }
                this.loading=true;
                queryEmailTypeList(params).then(res => {
                    this.loading=false;
                    this.isEnd=true;
                    this.total = res.data.total;
                    const list = res.data.records;
                    this.listAll = list;
                    this.data = getTimeEmailList(list);
                }).catch(()=> this.loading=false)
            },
            filterEmail(row) {//1:收件 0 发件
                let image =parseInt(row.emailType) ? 'get' : 'put';
                let head = `<img v-else src="/img/email/icon/icon-${image}.png"
alt="" title="${parseInt(row.emailType) ? '收件' : '发件'}" style="width: 16px;vertical-align: middle;margin-right: 3px">`
                const type = row.emailCustomerVO.type;
                if (type != 0) {
                    let str = row.emailCustomerVO.contactName + " | " + row.emailCustomerVO.enterpriseName;
                    return `<a href="javascript:void(0)" style="color: #8C8C8C;" title="${str}">${head + str}</a>`;
                }
                const name = row.senderNickName;
                const email = row.senderEmail;
                let str = '';
                if (name) {
                    if (name.indexOf("@") != -1) {
                        return `<a href="javascript:void(0)" style="color: #8C8C8C;" title="${name.split("@")[0] + " | " + email}">${head + name.split("@")[0] + " | " + email}</a>`;
                    }
                    str = name + " | " + email
                } else {
                    str = email.split("@")[0] + " | " + email
                }
                return `<a href="javascript:void(0)" style="color: #8C8C8C;" title="${str}">${head + str}</a>`;
            }
        },
        beforeDestroy() {
            this.bus.$off('getEmail');
        }
    }
</script>

<style scoped lang="scss">
  @import "../../../styles/email";

</style>
